<template>
  <div class="diy-popup" :style="style">我是弹窗</div>
</template>

<script setup lang="ts">
  import { ref, reactive, defineProps, computed } from "vue";
  const props = defineProps({
    position: {
      type: Object,
      default: () => ({
        left: 0,
        top: 0,
      }),
    },
  });
  const style = computed(() => {
    return {
      left: props.position.left,
      top: props.position.top,
    };
  });
</script>

<style lang="scss" scoped>
  .diy-popup {
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    // pointer-events: none;
  }
</style>
